import PropTypes from 'prop-types';
import React, {Fragment} from 'react';
import Draggable from 'react-draggable';

import styles from './card.css';

import shrinkIcon from './icon--shrink.svg';
import expandIcon from './icon--expand.svg';
import rightArrow from './icon--next.svg';
import leftArrow from './icon--prev.svg';
import closeIcon from './icon--close.svg';

const CardHeader = ({onCloseCards, onShrinkExpandCards, totalSteps, step, title, expanded}) => (
    <div className={styles.headerButtons}>
        <div className={styles.shrinkExpandButton} onClick={onShrinkExpandCards}>
            <img draggable={false} src={expanded ? shrinkIcon : expandIcon}/>
        </div>

        {totalSteps > 1 ? (
            <div>
                <div className={styles.headerTitle}>
                    {title}
                </div>
                <div className={styles.stepsList}>
                    {Array(totalSteps).fill(0).map((_, i) => (
                        <div
                            className={i === step ? styles.activeStepPip : styles.inactiveStepPip}
                            key={`pip-step-${i}`}
                        />
                    ))}
                </div>
            </div>
        ) : null}

        <div className={styles.closeButton} onClick={onCloseCards}>
            <img className={styles.closeIcon} src={closeIcon}/>
        </div>
    </div>
);

class VideoStep extends React.Component {
    componentDidUpdate (prevProps) {
        if (!this.props.expanded) {
            document.getElementById("video_course_card").pause();
        }
    }

    render () {
        return (
            <div className={styles.stepVideo} style={{height: `257px`, width: `466px`}}>
                    <video 
                        id="video_course_card"
                        poster={this.props.cover}//播放封面
                        src={this.props.video}//播放视频
                        type='video/mp4' //播放格式
                        controls="controls"//显示播放控件
                        controlsList="nodownload noremoteplayback"//去掉下载、远程回放
                        disablepictureinpicture="true"//去掉 画中画：三个点的菜单
                        style={{width:"100%"}}                        
                    />
            </div>
        );
    }
}
VideoStep.propTypes = {
    expanded: PropTypes.bool.isRequired,
    video: PropTypes.string.isRequired,
    cover: PropTypes.string
};

const ImageStep = ({image}) => (
    <Fragment>
        <img
            className={styles.stepImage}
            draggable={false}
            key={image} /* Use src as key to prevent hanging around on slow connections */
            src={image}
        />
    </Fragment>
);
ImageStep.propTypes = {
    image: PropTypes.string.isRequired
};

const TextStep = ({text}) => (
    <Fragment>
        <div className={styles.stepText} >
           {text}
        </div>
    </Fragment>
);
TextStep.propTypes = {
    text: PropTypes.string.isRequired
};

const NextPrevButtons = ({onNextStep, onPrevStep}) => (
    <Fragment>
        {onNextStep ? (
            <div>
                <div
                    className={styles.rightButton}
                    onClick={onNextStep}
                >
                    <img
                        draggable={false}
                        src={rightArrow}
                    />
                </div>
            </div>
        ) : null}

        {onPrevStep ? (
            <div>
                <div
                    className={styles.leftButton}
                    onClick={onPrevStep}
                >
                    <img
                        draggable={false}
                        src={leftArrow}
                    />
                </div>
            </div>
        ) : null}
    </Fragment>
);

NextPrevButtons.propTypes = {
    onNextStep: PropTypes.func,
    onPrevStep: PropTypes.func
};


CardHeader.propTypes = {
    expanded: PropTypes.bool.isRequired,
    onCloseCards: PropTypes.func.isRequired,
    onShrinkExpandCards: PropTypes.func.isRequired,
    step: PropTypes.number,
    totalSteps: PropTypes.number
};

const Cards = props => {
    const {
        content,
        dragging,
        step,
        expanded,

        onCloseCards,
        onShrinkExpandCards,
        onDrag,
        onStartDrag,
        onEndDrag,
        onNextStep,
        onPrevStep,

        ...posProps
    } = props;
    let {x, y} = posProps;

    if (content.length === 0) return;

    // 初始化显示位置
    const menuBarHeight = 44; //菜单高度

    //const wideCardWidth = 500;//最大宽度
    //const tallCardHeight = 320;//最大高度
    const cardHorizontalDragOffset = 400; // 最大宽度的80%
    const cardVerticalDragOffset = expanded ? 256 : 0; // 最大高度的80%（展开时）
    
    if (x === 0 && y === 0) {//居中
        x = (window.innerWidth+60)/2;
        y = 0;
    }

    return (
        // 设置可以拖动的区域
        <div
            className={styles.cardContainerOverlay}
            style={{
                width: `${window.innerWidth + (2 * cardHorizontalDragOffset)}px`,
                height: `${window.innerHeight  + cardVerticalDragOffset}px`,
                top: `${menuBarHeight}px`,
                left: `${-cardHorizontalDragOffset}px`
            }}
        >
            <Draggable
                bounds="parent"
                cancel="#video-div" // disable dragging on video div
                position={{x: x, y: y}}
                onDrag={onDrag}
                onStart={onStartDrag}
                onStop={onEndDrag}
            >
                <div className={styles.cardContainer}
                    onContextMenu = {(event)=>{event.preventDefault();return false}} //取消右键事件
                >
                    <div className={styles.card}>
                        <CardHeader
                            expanded={expanded}
                            step={step}
                            title={content[step].title}
                            totalSteps={content.length}
                            onCloseCards={onCloseCards}
                            onShrinkExpandCards={onShrinkExpandCards}
                        />


                        {<div className={expanded ? styles.stepBody : styles.hidden} >
                            {content[step].tag=='video' && (
                                <VideoStep
                                video={content[step].content} 
                                cover={content[step].cover}
                                dragging={dragging} 
                                expanded={expanded} 
                                />
                            )}

                            {content[step].tag=='image' && (
                                <ImageStep image={content[step].content} />
                            )}

                            {content[step].tag=='text' && (
                                <TextStep text={content[step].content} />
                            )}
                        </div>}
                        

                        {expanded&&(<NextPrevButtons
                            onNextStep={step < content.length - 1 ? onNextStep : null}
                            onPrevStep={step > 0 ? onPrevStep : null}
                        />)}
                    </div>
                </div>
            </Draggable>
        </div>
    );
};

Cards.propTypes = {
    content: PropTypes.array,
    // content: PropTypes.shape({
    //     id: PropTypes.shape({
    //         name: PropTypes.node.isRequired,
    //         img: PropTypes.string.isRequired,
    //         content: PropTypes.arrayOf(PropTypes.shape({
    //             title: PropTypes.node,
    //             image: PropTypes.string,
    //             video: PropTypes.string,
    //             deckIds: PropTypes.arrayOf(PropTypes.string)
    //         }))
    //     })
    // }),
    dragging: PropTypes.bool.isRequired,
    expanded: PropTypes.bool.isRequired,

    onCloseCards: PropTypes.func.isRequired,
    onDrag: PropTypes.func,
    onEndDrag: PropTypes.func,
    onNextStep: PropTypes.func.isRequired,
    onPrevStep: PropTypes.func.isRequired,
    onShrinkExpandCards: PropTypes.func.isRequired,
    onStartDrag: PropTypes.func,
    onMouseDown: PropTypes.func,

    step: PropTypes.number.isRequired,
    x: PropTypes.number,
    y: PropTypes.number
};

Cards.defaultProps = {};

export {
    Cards as default
};
